<template>
  <section class="record">
    <!-- 主标题 -->
    <section class="left">
      <h1 class="header">一个标题</h1>
      <p>喵喵喵</p>
    </section>
    <!-- 正文 -->
    <section class="right">
      <aside class="point"></aside>
      <h1 class="header">2018.4.4 1:50</h1>
    </section>
  </section>
</template>

<script>
  export default {
    name: 'record'
  }

</script>

<style>
  .record {
    display: flex;
    position: relative;
  }

  .record>section {
    min-height: 200px;
    flex: 1 0 50%;
    position: relative;
    box-sizing: border-box;
    padding: 3px 30px;
  }

  .record * {
    word-wrap: break-word;
    word-break: break-all;
  }


  /* 线 */

  .left {
    border-right: 1px solid rgb(71, 61, 0);
  }

  .left p {
      float:right;
  }

  /* 点 */

  .point {
    position: absolute;
    left: -11px;
    top: -10px;
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    border: 1px solid rgb(71, 61, 0);
    background-color: rgb(255, 255, 255);
    border-radius: 20px;
    transform: scale(1);
  }

  /* 点中点 */

  .point::after {
      content:"";
      position:absolute;
      top:50%;
      left:50%;
      transform: translate(-50%, -50%);
      width:10px;
      height:10px;
      border-radius:20px;
      background-color:rgb(71,61,0);
  }

  .point:hover {
    animation-name:hover;
    animation-duration:0.5s;
    animation-fill-mode:forwards;
  }

  @keyframes hover {
    0%{
      transform:scale(1)
    }
    15%{
      transform:scale(1.3)
    }
    25%{
      transform:scale(1.5)
    }
    45%{
      transform:scale(1.2);
    }
    60%{
      transform:scale(1.4)
    }
    75%{
      transform:scale(1.3)
    }
    100%{
      transform:scale(1.2)
    }
  }


  .left>.header {
    text-align: right;
    font-size: 1.5em;
    transform: translateY(calc(-0.75em - 2px))
  }

  .right>.header {
    font-size: 1.2em;
    transform: translateY(calc(-1.2em + 10px))
  }

</style>
